<template>
  <van-row gutter="10px">
    <van-col span="24">
      <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
        <div v-for="(item, index) in images" :key="index">
            <swiper-item @click="swiperChange">
              <div class="slide-image" :style="'background-image:url('+ item +')'"></div>
            </swiper-item>
        </div>
      </swiper>
      <div class="jf">
        积分：{{price}}
      </div>
      <div class="tit">
        <div class="fn_goods_name">
          {{title}}
        </div>
      </div>
      <div class="dh clearfix">
          <van-icon name="point-gift-o" class="labelION" custom-class="ltb"/>
          <p class="labelTXT">兑换数量<span class="labelSpan">( {{allPrice}} )</span></p>
          <van-stepper
            @change="changeStep"
            class="stepper"
            :value="boxNumber"
            integer
            min="1"
            step="1"
            overlay="true"
            slot="button"
          />
      </div>
      <div class="p-1 txt-content">
        <rich-text :nodes="content"></rich-text>
      </div>
      
      <div style="height:70px;"></div>
      <van-goods-action class="grp">
        <van-goods-action-icon custom-class="cartT1" class="cartT1" icon="cart-o" text="购物车" :info="cartNum" @click="labelAdd"/>
        <van-goods-action-button custom-class="ctl" class="cartT " size="normal" type="default" text="加入购物车" @click='AddCartNum'/>
        <van-goods-action-button custom-class="" class="cartT" size="normal" type="primary" text="立即兑换" @click="exchange" />
      </van-goods-action>
    </van-col>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
  </van-row>
</template>
<script>
import Toast from '../../../static/vant/toast/toast.js'
import Dialog from '../../../static/vant/dialog/dialog'
import {integral, views} from '../../utils/utils.js'
export default {
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '礼品详情',
      imageUrl: '/images/a.png',
      path: '/pages/gift_details/main?id=' + this.$root.$mp.query.id
    }
  },
  onShow: function () {
    let _this = this
    let userDtr = wx.getStorageSync('userDtr')
    // 更新购物车数量
    wx.request({
      url: this.apiUrl + 'api/cart/getnum?uid_str=' + userDtr,
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.cartNum = data.data.goods_number
        }
      }
    })
  },
  data () {
    return {
      gid: '', // 商品id
      cartNum: 0, // 购物车数量
      price: 0, // 商品积分
      boxNumber: 1, // 兑换数量
      images: [], // 轮播图
      title: '商品详情',
      created_at: '', // 创建时间
      content: '' // 详情内容
    }
  },
  computed: {
    // 数量乘以单价，就是总兑换积分量
    allPrice: function () {
      return this.price * this.boxNumber
    }
  },
  components: {
  },
  methods: {
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    },
    // 加入购物车
    AddCartNum () {
      let _this = this
      this.cartNum = parseInt(this.boxNumber)
      Toast.setDefaultOptions.duration = 500
      let userDtr = wx.getStorageSync('userDtr')
      wx.request({
        url: this.apiUrl + 'api/cart/add?uid_str=' + userDtr + '&goods_id=' + this.gid + '&goods_number=' + this.cartNum,
        success (res) {
          let data = res.data
          if (data.code === 200) {
            _this.update()
            Toast.success({
              duration: 1500,
              message: '加入购物车'
            })
          }
        }
      })
    },
    // 更改兑换数量
    changeStep (value) {
      this.boxNumber = value.mp.detail
    },
    // 立即兑换
    exchange () {
      Dialog.alert({
        message: '兑换礼品将消耗您的积分！确定要兑换吗？'
      }).then(() => {
        wx.navigateTo({ url: '/pages/order/main?id=' + this.gid + '&type=once&number=' + this.boxNumber })
      })
    },
    labelAdd () {
      wx.navigateTo({ url: '/pages/cart/main' })
    },
    update () {
      let _this = this
      let userDtr = wx.getStorageSync('userDtr')
      // 更新购物车数量
      wx.request({
        url: this.apiUrl + 'api/cart/getnum?uid_str=' + userDtr,
        success (res) {
          let data = res.data
          if (data.code === 200) {
            _this.cartNum = data.data.goods_number
          }
        }
      })
    }
  },
  mounted (option) {
    let _this = this
    if (this.$root.$mp.query.id !== undefined) {
      wx.request({
        url: this.apiUrl + 'api/goods/show?id=' + this.$root.$mp.query.id,
        success (res) {
          let data = res.data
          if (data.code === 200) {
            _this.gid = _this.$root.$mp.query.id
            _this.images = data.data.image
            _this.content = data.data.content.replace(/<img/gi, '<img style="width:100%;height:auto;display:block;" ')
            _this.price = data.data.price
            _this.title = data.data.title
          }
        }
      })
    }
    _this.update()
  }
}
</script>

<style scope>
.altoung {
  font-size: 32px;
}
.van-goods-action-icon {
  width:100% !important;
  border:none !important;
}
.jf {
  color: #ff3f00;
  font-size: 36rpx;
  width: 90%;
  padding: 10px 5% 5px;
}
.cartT1 {
  width:20%;
  text-align:center;
  
}
.grp .ctl {
  background-color: #f7bd38;
  border: 0;
  color: #fff;
}
.cartT {
  width: 40%;
  font-size: 16px;
  display:inline-block;
}

.swiper{
  height:340px;
  border-bottom: 2px solid #f3f3f3;
  padding: 5px 0;
}
.slide-image{
  height: 340px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.fn_goods_name {
  padding: 0 5%;
  position: relative;
  color: #252525;
  overflow: hidden;
  font-weight: 500;
  line-height: 25px;
  font-size: 18px;
}
.tit {
  width: 100%;
  display: block;
  font-size: 16px;
  height: 52px;
  display: block;
  border-bottom: 2px solid #f3f3f3;
  padding-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.sheet {
  padding-bottom: 0;
}
.header {
  padding: 0 0 10px 110px;
  background-color: #fff;
  position: relative;
  line-height: 54px;
  font-size: 16px;
  color: #333;
  float: left;
}

.header .price {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  color: #e4393c;
  font-size: 14px;
}
.body {
  box-sizing: border-box;
  max-height: 379px;
  float: left;
  width: 100%;
}
.sku_kind {
  font-size: 12px;
  color: #999;
  margin: 0 10px;
  height: 40px;
  line-height: 40px;
}
.sku_choose .item {
  height:50rpx;
  float:left;
  padding:0 10rpx;
  line-height:50rpx;
  text-align:center;
  border-radius:8rpx;
  color:#333;
  background-color:#f7f7f7;
  font-size:28rpx;
  margin-right:5px;
  margin-top:5px;
}
.sku_choose .item.active {
  color:#fff;
  background-color:#07c160;
}
.dh {
  padding: 10px 0;
  width: 100%;
  border-bottom: #f3f3f3 1px solid;;
}
.stepper {
  margin: 0 10px;
  float: left;
  margin: 5px 0;
}
.labelTXT {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  width: 180px;
  float: left;
}
.labelION {
  margin: 0 15px;
  padding-top: 3px;
  line-height: 30px;
  float: left;
} 
.dh .ltb {
  margin-top: 5px;
  font-size: 22px;
}
.labelSpan {
  font-size: 12px;
  color: #999;
}
.btns_show {
  color: #fff;
  font-size: 16px;
  text-align: center;
  width: 100%;
  margin-bottom:-34px;
  float:left;
}
.header .avt {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 2px;
  width: 90px;
  height: 90px;
}
.van-popup {
  overflow-y:none;
}
.close {
  position:absolute;
  right:10px;
  top:10px;
  z-index:1;
  font-size:20px;
}
</style>